<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>INSPINIA | Main view</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">


    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

</head>

<body>

<div id="wrapper">

    <!--引入公共页面-->
    <div th:replace="common/sidebar::sidebar(activeUri='config-waitingRoom')"></div>
    <!--当前用户的账户信息-->
    <input type="hidden" id="current_user" th:value="${session.userAccount}">

    <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top white-bg" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
                    <form role="search" class="navbar-form-custom" method="post" action="#">
                        <div class="form-group">
                            <input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search">
                        </div>
                    </form>
                </div>
                <ul class="nav navbar-top-links navbar-right">
                    <li>
                        <a href="#">
                            <i class="fa fa-sign-out"></i> Log out
                        </a>
                    </li>
                </ul>

            </nav>
        </div>
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox ">
                        <div class="ibox-title">
                            <h5>候考室信息</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    <i class="fa fa-wrench"></i>
                                </a>

                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="alert alert-success">
                                候考室编号： <a class="alert-link" href="#" id="roomCode"></a>.
                            </div>
                            <div class="alert alert-info">
                                候考室名称： <a class="alert-link" href="#" id="name"></a>.
                            </div>
                            <div class="alert alert-warning">
                                考生分组号： <a class="alert-link" href="#" id="groupIds"></a>.
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="pull-right">
                10GB of <strong>250GB</strong> Free.
            </div>
            <div>
                <strong>Copyright</strong> Example Company &copy; 2014-2018
            </div>
        </div>

    </div>
</div>
<div class="modal inmodal" id="modal_addWaitingRoomInfo" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">配置候考室信息</h4>
                <small style="color: red">配置候考室信息后，会直接下载分组数据，请确定后再操作</small>
            </div>
            <div class="modal-body">
                <div class="form-group row"><label class="col-lg-3 col-form-label">候考室编号</label>
                    <div class="col-lg-9"><input type="text" placeholder="请输入候考室的考场号" class="form-control" id="text_waitingRoomCode"></div>
                </div>

                <div class="form-group row"><label class="col-lg-3 col-form-label">候考室名称</label>
                    <div class="col-lg-9"><input type="text" placeholder="候考室名称" class="form-control" id="text_name"></div>
                </div>


                <div class="form-group row"><label class="col-lg-3 col-form-label">考生分组号</label>
                    <div class="col-lg-9"><input type="text" placeholder="输入本候考室管理的考生组号。如A,B,C" class="form-control" id="text_groupIds"></div>
                </div>
               <p >可下载的分组：<strong id="text_available"></strong></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="btn_waitingRoomInfoConfirm">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- Mainly scripts -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

<!-- Custom and plugin javascript -->
<script src="js/inspinia.js"></script>
<script src="js/plugins/pace/pace.min.js"></script>
<script>
    $(document).ready(function() {
        getWaitingRoomInfo();
        
    });
    function getWaitingRoomInfo() {
        $.ajax({
            url:"/waitingRoomInfo/getOne",
            type:"POST",
            success: function (result) {
                var data=result.data;
                if (result.flag==false){
                    $("#modal_addWaitingRoomInfo").modal('show');
                    //获取可下载的考生分组信息
                    getAvailableDownLoadGroupIds();
                }else if (result.flag==true){
                    $("#roomCode").text(result.data.roomCode);
                    $("#name").text(result.data.name);
                    $("#groupIds").text(result.data.groupIds);
                }
            }
        });
    }
    
    $("#btn_waitingRoomInfoConfirm").click(function () {
        var roomCode=$("#text_waitingRoomCode").val();
        var name=$("#text_name").val();
        var groupIds=$("#text_groupIds").val();
        var reg_groupIds=/^[A-Z](,[A-Z])*$/;
        if (reg_groupIds.test(groupIds)){
        var data={roomCode:roomCode,
                  name:name,
                  groupIds:groupIds}

            $.ajax({
                url:"/waitingRoomInfo/saveOne",
                data:data,
                type:"POST",
                success:function (result) {
                    alert(result.message);
                    $("#modal_addWaitingRoomInfo").modal('hide');
                    window.location.reload();

                }
            })
        }else {
            alert("考生分组号格式错误，请按要求填写")
        }
    });

    function getAvailableDownLoadGroupIds() {
        $.ajax({
            url:"/groupInfo/getAvailableDownLoadGroupIds",
            type:"POST",
            success: function (result) {
                if (result.flag==false){
                    $("#text_available").text("没有可下载的考生分组信息")
                }else if(result.flag==true){
                    var data=result.data;
                    var resultArray = data.map(function(item) {
                        return "("+item.groupId + "组 " + item.account+"人"+")";
                    });

                    // 使用 join 方法将数组中的字符串拼接成一个单一的字符串
                    var resultString = resultArray.join(", ");
                    $("#text_available").text(resultString)
                }
            }
        });
    }


    
</script>
</body>

</html>
